<script>
export default {
  data() {
    return {
      form:{},
      team:[],
      jg:[],
      current:1,
      pageSize:10,
      total:0,
      doctorsData:[]
    }
  },
  methods: {
    addDoctor(){

    },
    searchDoctors() {
      // 实现搜索逻辑
      this.axios.post(`http://localhost:8302/doctor/findAll?current=${this.current}&pageSize=${this.pageSize}`,this.form).then(res=>{
        this.doctorsData = res.data.data.records;
        this.total = res.data.data.total;
      })
    }
  },
  created() {
    this.searchDoctors();
  },
}
</script>

<template>
  <div style="background-color: #F2F7FB;margin-top: 20px;margin-left:40px;margin-right:40px;padding-top:40px;width: 100%;" align="left">
    <el-header>|  医生管理</el-header>
    <div>
      <el-form align="left" style="margin-left: 20px">
        <el-form-item label="">
          所属机构<el-select v-model="form.iid" placeholder="请选择">
          <el-option v-for="item in jg" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
          所属团队<el-select v-model="form.tid" placeholder="请选择">
          <el-option v-for="item in team" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
          医生标签<el-select v-model="form.bq" placeholder="请选择">
          <el-option v-for="item in jg" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
          <span style="margin-left: 30px" align="right">
         <el-button type="primary" @click="addDoctor"  style="width: 140px;">新增医生信息</el-button>
         <el-button type="" @click="addDoctor" style="width: 100px;">导出</el-button>
       </span>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.name" placeholder="请输入关键字搜索" style="width: 200px;"></el-input>
          <el-button type="primary" @click="searchDoctors" style="width:100px;margin-left: 20px">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table

          width="100%"
          :data="doctorsData"
          stripe>
        <el-table-column
            prop="id"
            label="项目编号">
        </el-table-column>
        <el-table-column
            label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.img" width="50px">
          </template>
        </el-table-column>
        <!--      <el-table-column-->
        <!--          label="次数">-->
        <!--        <template slot-scope="scope">-->
        <!--          {{ scope.row.num }} 次-->
        <!--        </template>-->
        <!--      </el-table-column>-->
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="联系电话">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="角色">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="所属团队">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="所属机构">
        </el-table-column>
        <el-table-column align="center" prop="residentStatus" label="居民状态" width="150">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color=""
                :active-value="1"
                :inactive-value="0"
            ></el-switch>
            <span v-if="scope.row.status" class="switch-text">启用</span>
            <span v-else class="switch-text2">禁用</span>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="text" @click="viewDetails(scope.row)">查看详情</el-button>
            <el-button type="text" @click="sendMessage(scope.row)">发消息</el-button>
            <el-button type="text" @click="editDoctor(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteDoctor(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style>
.switch-text {
  position: absolute;
  left: 58px;
  top: 53%;
  transform: translateY(-50%);
  color: white;
  font-size: 9px;
}

.switch-text2 {
  position: absolute;
  left: 73px;
  top: 52%;
  transform: translateY(-50%);
  color: black;
  font-size: 9px;
}
</style>
